<template>
  <view :class="type == 'left' ? 'swiper' : 'swiperRight'">
    <view class="swiper-box  flex">
      <view class="swiper-box__item">
        <image :src="parts" mode="heightFix" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import parts from "@/static/images/parts.png";
defineProps({
  type: {
    type: String,
    defult: "left",
  },
});
const divStyle = ref({
  backgroundImage: `url(${parts})`,
  backgroundSize: "cover", // 根据需要调整
  height: "185px", // 根据需要调整
  width: "100%", // 根据需要调整
});
</script>

<style scoped lang="scss">
.swiper {
  width: 100%;
  z-index: 1;

  &-box {
    width: max-content;
    transform: translate3d(0, 0, 0);
    position: relative;
    overflow: hidden;
    min-width: 100%;
    animation-name: moveSlideshow-en;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 80s;
    animation-direction: normal;
    animation-delay: 0s;
    height: 306rpx;
    display: flex;
    align-items: flex-end;

    &__item {
      width: 50%;
      height: 256rpx;

      image {
        height: 100%;
      }
    }
  }
}

.swiperRight {
  width: 100%;
  z-index: 1;

  &-box {
    width: max-content;
    transform: translate3d(0, 0, 0);
    position: relative;
    overflow: hidden;
    min-width: 200%;
    animation-name: moveSlideshow-sa;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 80s;
    animation-direction: normal;
    animation-delay: 0s;
    height: 306rpx;
    display: flex;
    align-items: flex-end;

    &__item {
      width: 50%;
      height: 256rpx;

      image {
        height: 100%;
      }
    }
  }
}

@keyframes moveSlideshow-en {
  100% {
    transform: translateX(-50%);
  }
}

@keyframes moveSlideshow-sa {
  100% {
    transform: translateX(50%);
  }
}
</style>